<template>
    <div>
        <div class="editor-title">
            <span class="editor-title__name">{{ data.text }}</span>
            <div class="editor-title__sub-text">选择商品数量不超过10个</div>
        </div>

        <div class="img-btn-con">
            <div class="pdc-sort-con" v-if="data.data.data.length && data.data.data[0].product_id">
                <div class="set-tip">商品排序</div>
                <div style="padding: 12px 0">
                    <div style="font-size: 14px">已选商品{{ data.data.data.length }}个 <span style="color: #999; font-size: 12px">拖拽可排序</span></div>
                    <draggable v-model="data.data.data" item-key="product_id" animation="200" class="cls-flex" style="flex-wrap: wrap" @change="item_change">
                        <template #item="{ element, index }">
                            <div class="sort-item" @mouseover="element.showClose = true" @mouseout="element.showClose = false">
                                <img :src="element.img" style="width: 50px; height: 50px; border: 1px solid #e0e0e0" />
                                <div class="close-btn" :style="{ display: element.showClose ? '' : 'none' }">
                                    <el-icon color="#bbb" :size="20" @click="del_click(index)">
                                        <CircleCloseFilled />
                                    </el-icon>
                                </div>
                            </div>
                        </template>
                    </draggable>
                </div>
            </div>
            <div class="select-btn" @click="show_pdcPop" v-if="data.data.data.length < 10">选择商品</div>
            <div>列表样式</div>
            <div class="cls-flex">
                <div v-for="(type, i) in dataObj.typeArr" :key="i" class="type-con" @click="type_change(i)">
                    <img :class="[i == data.style.styleType ? 'active-icon' : '', 'img-item']" :src="i == data.style.styleType ? type.imgSel : type.img" />
                    <div :style="i == data.style.styleType ? 'color: #4B93FA;' : ''">{{ type.title }}</div>
                </div>
            </div>
            <!-- <div class="cls-between" style="padding-bottom: 1rem">
                <div class="label-con" style="flex: 1">标题行数</div>
                <div class="cls-between">
                    <div class="item-con" :class="data.style.titleMore == 1 ? 'item-con-active' : ''"
                        @click="data.style.titleMore = 1">一行</div>
                    <div class="item-con" :class="data.style.titleMore == 2 ? 'item-con-active' : ''"
                        @click="data.style.titleMore = 2">两行</div>
                </div>
            </div> -->
            <div class="cls-between" style="padding-bottom: 1rem">
                <div class="label-con" style="flex: 1">文本样式</div>
                <div class="cls-between">
                    <div class="item-con" :class="data.style.weight == 500 ? 'item-con-active' : ''" @click="data.style.weight = 500">常规</div>
                    <div class="item-con" :class="data.style.weight > 500 ? 'item-con-active' : ''" @click="data.style.weight = 600">加粗</div>
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con" style="flex: 1">供应商信息</div>
                <div>
                    <el-switch v-model="data.style.showSupp" width="60px" size="large" inline-prompt active-text="显示" inactive-text="隐藏" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con" style="flex: 1">价格颜色</div>
                <div>
                    <el-color-picker v-model="data.style.price_color" @change="color_change('price_color', '#0ac393')" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con" style="flex: 1">购买按钮</div>
                <div>
                    <el-switch v-model="data.style.showBuy" width="60px" size="large" inline-prompt active-text="显示" inactive-text="隐藏" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">页面边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['margin-left']" :max="max" @change="padding_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model="data.rpxStyle['margin-left']" @input="padding_change" />
                </div>
            </div>

            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">上边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['margin-top']" :min="0" :max="300" @change="mtt_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['margin-top']" @input="mtt_change" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">下边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['margin-bottom']" :min="0" :max="300" @change="mtb_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['margin-bottom']" @input="mtb_change" />
                </div>
            </div>
        </div>
    </div>

    <el-dialog
        v-model="dataObj.showPop"
        title="已上架商品"
        width="780px"
        top="8vh"
        :append-to-body="true"
        :destroy-on-close="true"
        @close="dataObj.showPop = false"
    >
        <div class="cls-between" style="margin-bottom: 1rem">
            <el-button @click="to_shopview">商品管理</el-button>
            <div style="width: 220px">
                <el-input v-model="dataObj.so" placeholder="输入商品名称搜索" clearable class="input-with-select">
                    <template #append>
                        <el-button :icon="Search" type="primary" @click="show_pdcPop" />
                    </template>
                </el-input>
            </div>
        </div>
        <el-table
            ref="multipleTableRef"
            class="table-mb"
            :data="dataObj.pdcArr"
            style="width: 100%"
            v-loading="dataObj.pageLoading"
            :header-cell-style="{ background: '#F5F7FA' }"
        >
            <el-table-column type="selection" width="55" :selectable="select_able" />
            <el-table-column label="商品图片" width="120">
                <template #default="scope">
                    <img style="width: 40px; height: 40px; border-radius: 3px" :src="scope.row.img" />
                </template>
            </el-table-column>
            <el-table-column property="product_name" label="商品名称" />
            <el-table-column property="color" label="颜色" />
            <el-table-column property="product_price" label="价格" />
        </el-table>
        <div>
            <el-pagination background layout="total, prev, pager, next, jumper" :total="dataObj.total" :page-size="10" v-model:current-page="dataObj.page" />
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dataObj.showPop = false">取消</el-button>
                <el-button type="primary" @click="submit_pdc">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, reactive, watch } from "vue"
import { ElTable } from "element-plus"
import { Search, CircleCloseFilled } from "@element-plus/icons-vue"
import draggable from "vuedraggable"

import i1 from "@assets/design/one0.png"
import i2 from "@assets/design/one.png"
import i3 from "@assets/design/two0.png"
import i4 from "@assets/design/two.png"
import i5 from "@assets/design/three0.png"
import i6 from "@assets/design/three.png"

const { proxy } = getCurrentInstance()

/** 商品相关数据data */
const dataObj = reactive({
    pdcArr: [], // 商品列表
    showPop: false, // 是否显示商品选择弹窗
    pageLoading: false, // 加载状态
    so: "", // 搜索词
    page: 1, // 当前页码
    total: 0,
    typeArr: [
        { title: "一行一个", img: i1, imgSel: i2 },
        { title: "一行两个", img: i3, imgSel: i4 },
        // {title:'一行三个',img:i5,imgSel:i6},
    ],
})
const multipleTableRef = ref(null)
const max = 16 // 最大值，适用于内边距和圆角

/**
 * 商品列表
 * @property {Object} pageData  页面数据
 */
const props = defineProps({
    data: {
        type: Object,
        default: {
            id: 3,
            type_name: "pdcList",
            text: "商品列表",
            data: {
                ids:[],
                /**请求地址*/
                reqUrl: "",
                /**请求参数*/
                reqData: {},
                /* 当没有请求地址的时候，使用data数据 */
                data: [],
            },
        },
    },
})

onMounted(() => {})

/**
 * 显示商品选择窗口
 */
const show_pdcPop = () => {
    dataObj.showPop = true
    dataObj.page = 1
    dataObj.pdcArr = []
    req_pdc()
}
watch(
    () => dataObj.page,
    (val) => {
        dataObj.pdcArr = []
        req_pdc()
    }
)
const req_pdc = () => {
    dataObj.pageLoading = true
    proxy.$axios1
        .get("/api/product/index?limit=8&so=" + dataObj.so + "&page=" + dataObj.page)
        .then((r) => {
            let res = r.data
            dataObj.pageLoading = false
            if (res.code == 0) {
                res.data.map((val) => {
                    val.img = proxy.imgUrl + val.product_img
                })
                dataObj.pdcArr = res.data
                dataObj.total = res.count
                dataObj.page = res.current_page
                setTimeout(init_table_sel, 100)
            } else {
                proxy.$message({ message: res.msg, type: "error" })
            }
        })
        .catch((err) => {
            dataObj.pageLoading = false
        })
}

// 拖动商品时同步商品id数组排序
const item_change = (e) => {
    let idArr = []
    let pdcArr = props.data.data.data
    pdcArr.map((val) => {
        val.product_id && idArr.push(val.product_id)
    })
    props.data.data.ids = idArr
}

/**
 * 初始化表格选中情况
 */
const init_table_sel = () => {
    let idArr = []
    let pdcArr = props.data.data.data
    pdcArr.map((val) => {
        val.product_id && idArr.push(val.product_id)
    })
    props.data.data.ids = idArr

    dataObj.pdcArr.map((val) => {
        if (idArr.indexOf(val.product_id) != -1) {
            val.disable = true
        }
    })
}
const select_able = (row, index) => {
    return !row.disable
}
const del_click = (index) => {
    props.data.data.data.splice(index, 1)
    props.data.data.ids.splice(index, 1)
}
/**
 * 追加商品数组到当前数据,仅追加新选中
 * @param {*} arr
 */
const push = (arr) => {
    let pdcArr = props.data.data.data
    /**已选id数组 */
    let idArr = []
    pdcArr.map((val) => {
        idArr.push(val.product_id)
    })
    props.data.data.ids = idArr
    arr.map((val) => {
        if (idArr.indexOf(val.product_id) == -1) {
            pdcArr.push(val)
        }
    })
}

/** 确认选中的商品 */
const submit_pdc = () => {
    let rows = multipleTableRef.value.getSelectionRows()
    let pdcs = props.data.data.data
    let lengths = pdcs.length + rows.length
    if (lengths > 10) {
        proxy.$message({ message: "总商品数不能超过10个", type: "warning" })
        return
    }
    if (!pdcs.length || !pdcs[0].product_id) {
        props.data.data.data = rows
    } else {
        rows.length && push(rows)
    }

    let idArr = []
    props.data.data.data.map((val) => {
        idArr.push(val.product_id)
    })
    props.data.data.ids = idArr
    dataObj.showPop = false
}

const type_change = (index) => {
    props.data.style.styleType = index
    if (index == 0) {
        props.data.rpxStyle["margin-left"] = 0
    } else {
        props.data.rpxStyle["margin-left"] = 14
    }
}

const padding_change = (val) => {
    val = val > max ? max : val
    props.data.rpxStyle["margin-left"] = props.data.rpxStyle["margin-right"] = Number(val)
}
/** 前往商品管理页面 */
const to_shopview = () => {
    // router.push("/Goods/GoodsList")
    window.open("/#/Goods/GoodsList")
}

// 上下边距
const mtt_change = (val) => {
    props.data.rpxStyle["margin-top"] = Number(val)
}
const mtb_change = (val) => {
    props.data.rpxStyle["margin-bottom"] = Number(val)
}

/**
 * 当点击清空颜色时，恢复默认颜色
 * @param {*} key 要修改的颜色字段
 * @param {*} color 默认颜色， 当key值为null时，恢复默认颜色
 */
const color_change = (key, color) => {
    if (!props.data.style[key]) {
        props.data.style[key] = color
    }
}
</script>

<style lang="less" scoped>
.set-tip {
    line-height: 40px;
    border-bottom: 1px solid rgb(235, 237, 240);
}

.img-item {
    width: 50px;
    height: 50px;
    border: 1px solid #e0e0e0;
}

.active-icon {
    border: 1px solid #4b93fa;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.el-button + .el-button {
    margin-left: 0 !important;
}

.el-button {
    border-radius: 0 !important;
}

.img-btn {
    border: 1px solid #4b93fa;
    padding: 9px 16px;
    background: #fff;
    color: #4b93fa;
    border-radius: 2px;
    cursor: pointer;
}

.item-con {
    color: #323232;
    padding: 7px 14px;
    border: 1px solid #ebedf0;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.item-con-active {
    color: #4b93fa !important;
    background-color: #edf4ff !important;
    border: 1px solid #4b93fa;
}

.label-con {
    flex: none;
    width: 82px;
    font-size: 14px;
    padding-right: 10px;
    color: #969799;
}

.close-btn {
    position: absolute;
    top: 0;
    cursor: pointer;
    right: 0;
}

.select-btn {
    height: 40px;
    line-height: 40px;
    background: rgba(21, 91, 212, 0.03);
    border: 1px dashed rgba(21, 91, 212, 0.3);
    border-radius: 2px;
    margin: 0 16px 32px;
    text-align: center;
    cursor: pointer;
    color: #4b93fa;
}

.pdc-sort-con {
    background: #f7f7f7;
    padding: 0 16px;
    margin-bottom: 16px;
}

.sort-item {
    padding: 8px 8px 0 0;
    position: relative;
}

.type-con {
    margin-right: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    text-align: center;
    font-size: 12px;
    color: #999;
    cursor: pointer;
}
</style>
